<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>${message("admin.product.list")}</title>


    <link href="${base}/resources/admin/css/amazeui.css" rel="stylesheet" type="text/css" /><link href="${base}/resources/admin/css/common.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="${base}/resources/admin/js/jquery.js"></script>
    <script type="text/javascript" src="${base}/resources/admin/js/common.js"></script>
    <script type="text/javascript" src="${base}/resources/admin/js/list.js"></script> <script type="text/javascript" src="${base}/resources/admin/js/amazeui.min.js"></script>


    <script type="text/javascript">
        $().ready(function() {

            var $listForm = $("#listForm");
            var $moreButton = $("#moreButton");
            var $filterSelect = $("#filterSelect");
            var $filterOption = $("#filterOption a");

		[@flash_message /]

            // 更多选项
            $moreButton.click(function() {
            $.dialog({
                title: "${message("admin.product.moreOption")}",
			[@compress single_line = true]
                content: '
                <table id="moreTable" class="moreTable">
                    <tr>
                    <th>
			${message("Product.productCategory")}:
                <\/th>
            <td>
            <select name="productCategoryId">
            <option value="">${message("admin.common.choose")}<\/option>
				[#list productCategoryTree as productCategory]
                <option value="${productCategory.id}"[#if productCategory.id == productCategoryId] selected="selected"[/#if]>
					[#if productCategory.grade != 0]
						[#list 1..productCategory.grade as i]
                            &nbsp;&nbsp;
						[/#list]
					[/#if]
				${productCategory.name}
                    <\/option>
				[/#list]
                <\/select>
                <\/td>
                <\/tr>
            <tr>
            <th>
			${message("Product.brand")}:
                <\/th>
            <td>
            <select name="brandId">
            <option value="">${message("admin.common.choose")}<\/option>
				[#list brands as brand]
                <option value="${brand.id}"[#if brand.id == brandId] selected="selected"[/#if]>
				${brand.name}
                    <\/option>
				[/#list]
                <\/select>
                <\/td>
                <\/tr>
            <tr>
            <th>
			${message("Product.promotions")}:
                <\/th>
            <td>
            <select name="promotionId">
            <option value="">${message("admin.common.choose")}<\/option>
				[#list promotions as promotion]
                <option value="${promotion.id}"[#if promotion.id == promotionId] selected="selected"[/#if]>
				${promotion.name}
                    <\/option>
				[/#list]
                <\/select>
                <\/td>
                <\/tr>
            <tr>
            <th>
			${message("Product.tags")}:
                <\/th>
            <td>
            <select name="tagId">
            <option value="">${message("admin.common.choose")}<\/option>
				[#list tags as tag]
                <option value="${tag.id}"[#if tag.id == tagId] selected="selected"[/#if]>
				${tag.name}
                    <\/option>
				[/#list]
                <\/select>
                <\/td>
                <\/tr>
                <\/table>',
			[/@compress]
                width: 470,
                modal: true,
                ok: "${message("admin.dialog.ok")}",
                cancel: "${message("admin.dialog.cancel")}",
                onOk: function() {
                    $("#moreTable :input").each(function() {
                        var $this = $(this);
                        $("#" + $this.attr("name")).val($this.val());
                    });
                    $listForm.submit();
                }
                },500,300);
                });

                // 商品筛选
                $filterSelect.mouseover(function() {
                    var $this = $(this);
                    var offset = $this.offset();
                    var $menuWrap = $this.closest("div.menuWrap");
                    var $popupMenu = $menuWrap.children("div.popupMenu");
                    $popupMenu.css({left: offset.left, top: offset.top + $this.height() + 2}).show();
                    $menuWrap.mouseleave(function() {
                    $popupMenu.hide();
                });
                });

                // 筛选选项
                $filterOption.click(function() {
                    var $this = $(this);
                    var $dest = $("#" + $this.attr("name"));
                    if ($this.hasClass("checked")) {
                    $dest.val("");
                } else {
                    $dest.val($this.attr("val"));
                }
                    $listForm.submit();
                    return false;
                });

                // 多规格下拉交互
                $('.showSepc').click(function(){
                    changeState($(this));
                });
                // 选择一系列规格产品
                $('.good_id').click(function(){
                    if($(this).attr("checked")=="checked"){
                    $(this).parents('tbody').find("input[name='ids']").attr("checked","true");
                    $("#deleteButton").removeClass("disabled");
                }else{
                    $(this).parents('tbody').find("input[name='ids']").removeAttr("checked");
                    $("#deleteButton").addClass("disabled");
                }
                });
                // 修改旋转显示状态
                function changeState(t){
                    var flag = t.attr('data-flag');
                    if(flag =='close'){
                    t.addClass('icon-xiangshang');
                    t.removeClass('icon-xiangshang-copy');
                    t.attr('data-flag' , 'open');
                    t.parents('tbody').children('.hid').show(200);
                }else{
                    t.addClass('icon-xiangshang-copy');
                    t.removeClass('icon-xiangshang');
                    t.attr('data-flag' , 'close');
                    t.parents('tbody').children('.hid').hide(200);
                }
                }
                });
    </script>
</head>
<body>
<div class="path">
    <a href="${base}/asl-admin/common/index.htm">${message("admin.path.index")}</a> &raquo; ${message("admin.product.list")} <span>(${message("admin.page.total", page.total)})</span>
</div>
<form id="listForm" action="list.htm" method="get">
    <input type="hidden" id="productCategoryId" name="productCategoryId" value="${productCategoryId}" />
    <input type="hidden" id="tagId" name="tagId" value="${tagId}" />
    <input type="hidden" id="isOutOfStock" name="isOutOfStock" value="[#if isOutOfStock??]${isOutOfStock?string("true", "false")}[/#if]" />
    <input type="hidden" id="isStockAlert" name="isStockAlert" value="[#if isStockAlert??]${isStockAlert?string("true", "false")}[/#if]" />
    <div class="bar">
        <a href="add.htm" class="iconButton" id="addButton">
            <i class="iconfont icon-anonymous-iconfont1">&nbsp;</i>${message("admin.common.add")}
        </a>
        <div class="buttonWrap">
            <a href="javascript:;" id="deleteButton" class="iconButton disabled">
                <i class="iconfont icon-icon27">&nbsp;</i>${message("admin.common.delete")}
            </a>
            <a href="javascript:;" id="refreshButton" class="iconButton">
                <i class="iconfont icon-shuaxin1">&nbsp;</i>${message("admin.common.refresh")}
            </a>
            <div class="menuWrap">
                <a href="javascript:;" id="filterSelect" class="button">
				${message("admin.product.filter")}<span class="arrow">&nbsp;</span>
                </a>
                <div class="popupMenu">
                    <ul id="filterOption" class="check">
                        <li class="separator">
                            <a href="javascript:;" name="isOutOfStock" val="false"[#if isOutOfStock?? && !isOutOfStock] class="checked"[/#if]>${message("admin.product.isStack")}</a>
                        </li>
                        <li>
                            <a href="javascript:;" name="isOutOfStock" val="true"[#if isOutOfStock?? && isOutOfStock] class="checked"[/#if]>${message("admin.product.isOutOfStack")}</a>
                        </li>
                        <li class="separator">
                            <a href="javascript:;" name="isStockAlert" val="false"[#if isStockAlert?? && !isStockAlert] class="checked"[/#if]>${message("admin.product.normalStore")}</a>
                        </li>
                        <li>
                            <a href="javascript:;" name="isStockAlert" val="true"[#if isStockAlert?? && isStockAlert] class="checked"[/#if]>${message("admin.product.isStockAlert")}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <a href="javascript:;" id="moreButton" class="button">${message("admin.product.moreOption")}</a>
            <div class="menuWrap">
                <a href="javascript:;" id="pageSizeSelect" class="button">
				${message("admin.page.pageSize")}<span class="arrow">&nbsp;</span>
                </a>
                <div class="popupMenu">
                    <ul id="pageSizeOption">
                        <li>
                            <a href="javascript:;"[#if page.pageSize == 10] class="current"[/#if] val="10">10</a>
                        </li>
                        <li>
                            <a href="javascript:;"[#if page.pageSize == 20] class="current"[/#if] val="20">20</a>
                        </li>
                        <li>
                            <a href="javascript:;"[#if page.pageSize == 50] class="current"[/#if] val="50">50</a>
                        </li>
                        <li>
                            <a href="javascript:;"[#if page.pageSize == 100] class="current"[/#if] val="100">100</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="menuWrap">
            <div class="search">
                <span id="searchPropertySelect" class="arrow">&nbsp;</span>
                <input type="text" id="searchValue" name="searchValue" value="${page.searchValue}" maxlength="200" />
                <button type="submit">&nbsp;</button>
            </div>
            <div class="popupMenu">
                <ul id="searchPropertyOption">
                    <li>
                        <a href="javascript:;"[#if page.searchProperty == "name"] class="current"[/#if] val="name">${message("Product.name")}</a>
                    </li>
                    <li>
                        <a href="javascript:;"[#if page.searchProperty == "sn"] class="current"[/#if] val="sn">${message("Product.sn")}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <table id="listTable" class="list">
        <tr>
            <th class="check">
                <input type="checkbox" id="selectAll" />
            </th>
            <th>
                <a href="javascript:;" class="sort" name="sn">${message("Product.sn")}</a>
            </th>
            <th>
                <a href="javascript:;" class="sort" name="image">商品图片</a>
            </th>
            <th>
                <a href="javascript:;" class="sort" name="name">${message("Product.name")}</a>
            </th>
            <th>
                <a href="javascript:;" class="sort" name="productCategory">${message("Product.productCategory")}</a>
            </th>
            <th>
                <a href="javascript:;" class="sort" name="merchant.username">商家</a>
            </th>
            <th>
                <a href="javascript:;" class="sort" name="price">${message("Product.price")}</a>
            </th>
            <th>
                <a href="javascript:;" class="sort" name="promotionPrice">促销价</a>
            </th>
            <th>
                <a href="javascript:;" class="sort" name="allocatedStock">${message("Product.allocatedStock")}</a>
            </th>
            <th>
                <a href="javascript:;" class="sort" name="stock">${message("Product.stock")}</a>
            </th>
            <th>
                <a href="javascript:;" class="sort" name="isMarketable">${message("Product.isMarketable")}</a>
            </th>
            <th>
                <a href="javascript:;" class="sort" name="createDate">${message("admin.common.createDate")}</a>
            </th>
            <th>
                <span>${message("admin.common.handle")}</span>
            </th>
        </tr>
    <tbody>
	[#list page.content as product]
    <tr class="goods-title">
        <td colspan="100">
            <input type="checkbox" class="good_id" value="${product.goods.id}" />
		<span class="am-badge am-badge-secondary am-radius">[#if product.merchant??]${product.merchant.name}[#else]自营[/#if]</span> ${product.name} [#if product.goods.products?size>1] <a href="javascript:void(0)" data-flag="close" class="iconfont icon-xiangshang-copy showSepc"></a>[/#if]
        </td>
    </tr>
		[#list product.goods.products as product]
        <tr [#if product_index > 0]class="hid"[/#if]>
            <td>
                <input type="checkbox" class="ids" name="ids" value="${product.id}" />
            </td>
            <td>
			${product.sn}
            </td>
            <td>
                <img class="preImage" src="${product.image!"/resources/admin/images/default.png"}" />
            </td>
            <td>
							<span title="${product.name}" style="white-space: nowrap">
							${abbreviate(product.name, 50, "...")}
							</span>
				[#if product.specifications?has_content]
					[#list product.specificationValues as specificationValue]
                        [${specificationValue.name}]
					[/#list]
				[/#if]
            </td>
            <td>
            ${product.productCategory.name}
            </td>
            <td>
               <span class="am-badge am-badge-success am-round">${(product.merchant.username)!""}</span>
            </td>
            <td>
			${currency(product.price)}
            </td>
            <td>
				[#if product.promotionPrice??]${currency(product.promotionPrice)}[#else]暂无[/#if]
            </td>
            <td>
			${product.allocatedStock}
            </td>
            <td>
				[#if product.stock??]
					[#if product.allocatedStock == 0]
                        <span[#if product.isOutOfStock] class="red"[/#if]>${product.stock}</span>
					[#else]
                        <span[#if product.isOutOfStock] class="red"[/#if] title="${message("Product.allocatedStock")}: ${product.allocatedStock}">${product.stock}</span>
					[/#if]
				[/#if]
            </td>
            <td>
                <span class="${product.isMarketable?string("true", "false")}Icon">&nbsp;</span>
            </td>
            <td>
                <span title="${product.createDate?string("yyyy-MM-dd HH:mm:ss")}">${product.createDate}</span>
            </td>
            <td>
                <a href="edit.htm?id=${product.id}" title="编辑"><i class="iconfont icon-bianji edit-icon" ></i></a>
			[#--<a href="/asl-admin/review/edit.htm?id=${product.id}" title="评论"><i class="iconfont icon-xinwen1  edit-icon" ></i></a>--]
            </td>

        </tr>
		[/#list]
    </tbody>
	[/#list]

    </table>
[@pagination pageNumber = page.pageNumber totalPages = page.totalPages]
	[#include "/admin/include/pagination.ftl"]
[/@pagination]
</form>
</body>
</html>